@charset "utf-8";

/*header*/
header{width: 100%;height:0.52rem;background: pink;}

/*section*/
section{width: 100%;flex: 1;overflow: hidden;position: relative;}
section .bg{width: 1080px;height: 1920px;position: absolute;left: 0;top: 0;
	z-index: -1;
	animation: mymoveBg 60s linear infinite alternate;}
section .bl{width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;
	left: 0;top: 0;}
section .ball{width: 100%;height: 100%;transform-style: preserve-3d;position: relative;}
section .ball>a>img{width: 1rem;height: 1rem;border-radius: 50%;position: absolute;
	/*animation: mymove 10s linear infinite;*/}
section .ball>a:nth-child(1)>img{left: -1rem;top: 1rem;animation: mymove1 50s linear infinite;}
section .ball>a:nth-child(2)>img{left: 0.52rem;top: 2.8rem;animation: mymove2 20s linear infinite alternate;}
section .ball>a:nth-child(3)>img{left: -0.5rem;top: 4.1rem;animation: mymove3 20s linear infinite alternate-reverse;}
section .ball>a:nth-child(4)>img{left: 0.2rem;top: 100%;animation: mymove4 20s linear infinite alternate;}
section .ball>a:nth-child(5)>img{left: 20%;top: -2rem;animation: mymove5 80s linear infinite;}

@keyframes mymove1{
	0%{
		transform: translate(0,0);
	}
	25%{
		transform: translate(5rem,2rem);
	}
	50%{
		transform: translate(5rem,6rem);
	}
	75%{
		transform: translate(0,2rem);
	}
	100%{
		transform: translate(0,0);
	}
}
@keyframes mymove2{
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(2.5rem,-1.3rem);
	}
}
@keyframes mymove3{
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(2.8rem,-1rem);
	}
}
@keyframes mymove4{
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(4rem,-1.6rem);
	}
}
@keyframes mymove5{
	0%{
		transform: translate(0,0);
	}
	25%{
		transform: translate(2.2rem,8rem);
	}
	50%{
		transform: translate(-5rem,6rem);
	}
	75%{
		transform: translate(2.2rem,0);
	}
	100%{
		transform: translate(0,0);
	}
}


@keyframes mymove{
	0%{
		transform: translate(0,0);
	}
	20%{
		transform: translate(200px,100px);
	}
	40%{
		transform: translate(400px,200px);
	}
	60%{
		transform: translate(200px,400px);
	}
	80%{
		transform: translate(100px,800px);
	}
	100%{
		transform: translate(0,0);
	}
}

@keyframes mymoveBg{
	0%{
		transform: translate(0,0);
	}
	25%{
		transform: translate(-540px,-960px);
	}
	50%{
		transform: translate(-540px,0);
	}
	75%{
		transform: translate(0,-960px);
	}
	100%{
		transform: translate(0,0);
	}
}
/*关闭按钮*/
.h .close,.f .close,.con3 .close{display: block;width: 0.5rem;height: 0.5rem;background: yellow;
	position: fixed;right: 0;top: 0;z-index: 1;}
/*环形*/
.h,.f{width: 100%;height: 100%;background: #000;position: absolute;left: 0;top: 0;z-index: 2;display: none;}
.h .wait,.f .wait{display: block;width: 0.5rem;height: 0.5rem;border-radius: 50%;background: yellow;position: absolute;right: 0;bottom: 0;}
.h .box{height: 200px;width: 100%;transform-style: preserve-3d;
	position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.h .box ul{position: relative;height: 200px;width: 133px;position: relative;transform-style: preserve-3d;
	border: solid 1px red;margin:auto;animation: run 40s linear infinite;}
.h .box li{position: absolute;list-style: none; left:0;top:0;}
.h .box li:nth-child(1){transform: rotateY(0deg)translateZ(-300px);}
.h .box li:nth-child(2){transform: rotateY(36deg) translateZ(-300px);}
.h .box li:nth-child(3){transform: rotateY(72deg) translateZ(-300px);}
.h .box li:nth-child(4){transform: rotateY(108deg) translateZ(-300px);}
.h .box li:nth-child(5){transform: rotateY(144deg) translateZ(-300px);}
.h .box li:nth-child(6){transform: rotateY(180deg) translateZ(-300px);}
.h .box li:nth-child(7){transform: rotateY(216deg) translateZ(-300px);}
.h .box li:nth-child(8){transform: rotateY(252deg) translateZ(-300px);}
.h .box li:nth-child(9){transform: rotateY(288deg) translateZ(-300px);}
.h .box li:nth-child(10){transform: rotateY(324deg) translateZ(-300px);}
@keyframes  run{
	0%{
		transform: rotateY(0deg);
	}
	100%{
		transform: rotateY(360deg);
	}
}

/*正方体*/
.f .box{position:relative;perspective: 1600px;transform: scale(0.5);}
.f .container{position: relative;left:-220px;top: -100px;width: 800px;height: 800px;transform-style: preserve-3d;animation: rotate-frame 30s linear infinite;
transform-origin: 50% 50% 200px;/*设置3d空间的原点在平面中心再向z轴移动200px的位置*/}
.f .slide{width: 400px;height: 400px;position: absolute;}
.f .top{left:200px;top:-200px;transform: rotateX(-90deg);transform-origin: bottom;background:url(../images/f1.jpeg) no-repeat;background-size: 100% 100%;}
.f .bottom{left:200px;bottom:-200px;transform: rotateX(90deg);transform-origin: top;background:url(../images/f2.jpeg) no-repeat;background-size: 100% 100%;}
.f .left{left:-200px;top:200px;transform: rotateY(90deg);transform-origin: right;background:url(../images/f3.jpg) no-repeat;background-size: 100% 100%;}
.f .right{right:-200px;top:200px;transform: rotateY(-90deg);transform-origin: left;background:url(../images/f4.jpeg) no-repeat;background-size: 100% 100%;}
.f .front{left: 200px;top:200px;transform: translateZ(400px);background:url(../images/f5.jpg) no-repeat;background-size: 100% 100%;}
.f .back{left:200px;top:200px;transform: translateZ(0);background:url(../images/f6.jpg) no-repeat;background-size: 100% 100%;}
@keyframes rotate-frame{
	0%{
		transform: rotateX(0deg) rotateY(0);
	}
	10%{
		transform: rotateX(0deg) rotateY(180deg);
	}
	20%{
		transform: rotateX(-180deg) rotateY(180deg);
	}
	30%{
		transform: rotateX(-360deg) rotateY(180deg);
	}
	40%{
		transform: rotateX(-360deg) rotateY(360deg);
	}
	50%{
		transform: rotateX(-180deg) rotateY(360deg);
	}
	60%{
		transform: rotateX(90deg) rotateY(180deg);
	}
	70%{
		transform: rotateX(0deg) rotateY(180deg);
	}
	80%{
		transform: rotateX(90deg) rotateY(90deg);
	}
	90%{
		transform: rotateX(90deg) rotateY(0deg);
	}
	100%{
		transform: rotateX(0deg) rotateY(0deg);
	}
}
/*con3*/
.con3{width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: auto;display: none;}
.con3_box{width: 100%;position: absolute;left: 0;top: 0;background: #000;
	display: flex;justify-content: space-around;flex-wrap: wrap;padding-top: 0.2rem;}
.con3_box>img{width: 1rem;height: 1rem;border-radius: 50%;margin-bottom: 0.2rem;}


/*footer*/
footer{width: 100%;height: 0.77rem;background: yellow;display: flex;
	justify-content: space-around;align-items: center;}
footer .fig{font-size: 0.2rem;display: flex;flex-direction: column;align-items: center;}
footer .fig>i{font-size: 0.3rem;}

